var otherData = [];//用户的信息
var Main = React.createClass({
    componentDidMount: function () {
        setTimeout(function () {
            suixun.hideLoding();//隐藏加载中
        },500);
    },
    onMouseOutImg: function () {
        $(".uploadImg").hide();
    },
    onMouseOverImg: function () {
        $(".uploadImg").show();
    },
    onClickUpload: function () {
        //suixun.alert("修改头像功能建设中...");
    },
    onClickSave: function () {
        var pass=$("#newPwd").val();
        var orgPwd = $("#orgPwd").val();
        if(orgPwd == ""){
            suixun.alert("原密码不能为空!");
            return false;
        }
        if(pass!=$("#againNewPwd").val()){
            suixun.alert("两次输入的新密码不一致");
            return false;
        }
        if(pass.length<6){
            suixun.alert("新密码至少为6位");
            return false;
        }
        suixun.showLoding();//显示加载中
        var param="param={";
        param = getJsonDataNotEmpty(param,"workNumber",'"'+orgPwd+'"');
        param = getJsonDataNotEmpty(param,"password",'"'+pass+'"');
        param += "}";
        $.ajax({
            url:serverUrl+'/userManager/changePassword.json',
            data:param,
            dataType:'json',
            success:function (data) {
                suixun.hideLoding(200);//隐藏加载中
                if(data!=null &&  data.code == 200){
                    suixun.alert("修改成功");
                    $("#newPwd").val("");
                    $("#orgPwd").val("");
                    $("#againNewPwd").val("");
                } else {
                    suixun.alert((data!=null && data.msg!=null)?data.msg:"修改失败");
                }
            }.bind(this),
            error: function (req,info,error) {
                top.location.href = invalidUrl;
            }
        });
    },
    render: function () {
        return (
            <div className="tableManage-body">
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">账户信息</div>
                    </div>
                </header>
                <div className="user-info clearfix">
                    <div className="user-info-value">
                        <div className="user-info-value-list">
                            <div className="list-title">账&nbsp;&nbsp;号:</div>
                            <div className="list-value-f-span">
                                <span className="list-value-span">13606628823</span>
                            </div>
                        </div>
                        <div className="user-info-value-list">
                            <div className="list-title">姓&nbsp;&nbsp;名:</div>
                            <div className="list-value-f-span">
                                <span className="list-value-span">张三</span>
                            </div>
                        </div>
                        <div className="user-info-value-list">
                            <div className="list-title">组&nbsp;&nbsp;织:</div>
                            <div className="list-value-f-span">
                                <span className="list-value-span organize">随寻科技-研发中心</span>
                                <div className="list-button button-update">修改</div>
                            </div>
                            <div className="list-value-f-input">
                                    <span className="list-value-f-input-span">
                                        <input className="list-value-input" type="text" value="随寻科技-研发中心"/>
                                    </span>
                                <div className="list-button button-save">保存</div>
                                <div className="list-button button-cancel" >取消</div>
                            </div>
                        </div>
                        <div className="user-info-value-list">
                            <div className="list-title">邮&nbsp;&nbsp;箱:</div>
                            <div className="list-value-f-span">
                                <span className="list-value-span ">1130193159@qq.com</span>
                                <div className="list-button button-update">修改</div>
                            </div>
                            <div className="list-value-f-input">
                                        <span className="list-value-f-input-span">
                                            <input className="list-value-input mailbox" type="text" value="1130193159@qq.com"/>
                                        </span>
                                <div className="list-button button-save">保存</div>
                                <div className="list-button button-cancel">取消</div>
                            </div>
                        </div>
                        <div className="user-info-value-list">
                            <div className="list-title">地&nbsp;&nbsp;址:</div>
                            <div className="list-value-f-span">
                                <span className="list-value-span address">四川省成都高新区航天国际1栋22</span>
                                <div className="list-button button-update">修改</div>
                            </div>
                            <div className="list-value-f-input">
                                        <span className="list-value-f-input-span">
                                            <input className="list-value-input" type="text" value="四川省成都高新区航天国际1栋22"/>
                                        </span>
                                <div className="list-button button-save">保存</div>
                                <div className="list-button button-cancel">取消</div>
                            </div>
                        </div>
                    </div>
                    <div className="user-info-userImg">
                        <span>头像：</span>
                        <div className="user-info-userImg-img" onMouseOut={this.onMouseOutImg} onMouseOver={this.onMouseOverImg}>
                            <img src="../img/icon/parentHeadImg.png" />
                            <div className="uploadImg" onClick={this.onClickUpload}>上传</div>
                        </div>
                    </div>
                </div>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">安全设置</div>
                    </div>
                </header>
                <div className="resetPassword">
                    <div className="password-list">
                        <div className="password-list-title">原密码</div>
                        <div className="password-list-div-right">
                                    <span className="d-r-span">
                                        <input type="password" id="orgPwd" placeholder="请输入原密码"/>
                                    </span>
                            <div className="errorImg" ></div>
                        </div>
                    </div>
                    <div className="password-list">
                        <div className="password-list-title">新密码</div>
                        <div className="password-list-div-right">
                                    <span className="d-r-span">
                                        <input type="password" id="newPwd" placeholder="请输入新密码"/>
                                    </span>
                            <div className="errorImg" ></div>
                        </div>
                    </div>
                    <div className="password-list">
                        <div className="password-list-title">确认新密码</div>
                        <div className="password-list-div-right">
                                    <span className="d-r-span">
                                        <input type="password" id="againNewPwd" placeholder="请再次输入新密码"/>
                                    </span>
                            <div className="errorImg" ></div>
                        </div>
                    </div>
                    <div className="saveUpPwd" onClick={this.onClickSave}>保存</div>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        )
    }
});
ReactDOM.render(
    <Main  otherData={otherData} />,
    document.getElementById('tableManage')
);
//显示修改按钮
$(".list-value-f-span").hover(function () {
    var buttonUpdate = $(this).find(".button-update");
    $(buttonUpdate).show();
},function () {
    var buttonUpdate = $(this).find(".button-update");
    $(buttonUpdate).hide();
});
//显示修改的输入框
$(".list-value-f-span").on("click",".button-update",function () {
    var  listValueFInput = $(this).parent().next();
    $($(this).parent()).hide();
    $(listValueFInput).show();
});
//点击取消
$(".list-value-f-input").on("click",".button-cancel",function () {
    $(this).parent().hide();
    $(this).parent().parent().find(".list-value-f-span").show();
});